import React from "react";
import { IUserArguments } from "@/stores/bases/user";
import { Colors, Image, Text, TouchableOpacity, View } from "react-native-ui-lib";
import { useTranslation } from "react-i18next";
import { useColor } from "@/hooks/color";
import { useLoadedFontFamilyByAction } from "@/hooks/font";

interface IBarUserProps {
  user: IUserArguments;
}

const BarUser: React.FC<IBarUserProps> = ({ user }) => {
  const onPressByActionUserInfo = () => console.log("onPressByActionUserInfo");
  const userImage: React.ComponentProps<typeof Image> = {
    src: user.avatar,
  };

  return (
    <TouchableOpacity className='flex flex-row gap-2 items-center justify-between' onPress={onPressByActionUserInfo}>
      <Image
        {...userImage}
        className='rounded-2xl border-2 w-14 h-14 object-cover'
        style={{ borderColor: Colors.getColorTint(useColor().colors.text, 70) }}
      />
      <View className='flex flex-col gap-1 justify-between items-start h-12'>
        <Text text60 style={{ color: useColor().colors.text, ...useLoadedFontFamilyByAction("SONG_BAIT") }}>
          {user.name || useTranslation().t("5001")}
        </Text>
        <Text style={{ color: Colors.getColorTint(useColor().colors.text, 50), ...useLoadedFontFamilyByAction("SONG_BAIT") }}>
          {user.phone || useTranslation().t("5002")}
        </Text>
      </View>
    </TouchableOpacity>
  );
};

export default BarUser;
